<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类</title>
</head>
<body>
    <h1>ES6 Class类</h1>
</body>
<script>
    class Student{
        //构造方法
        constructor(na,age){
            this.name=na;   //属性
            this.age=age;
            this.area="江西";
            console.log("Student构造方法...");
        }
        get name(){
            console.log("正在取值");
            return this._name;   //防止递归所以不能直接return this.name;
        }
        set name(v){
            console.log("正在赋值");
            this._name=v;
        }
        //普通方法
        sayHi(){
            console.log("名字="+this.name);
            console.log("年龄="+this.age);
        }
        //静态方法
        static sa(){
            console.log("名字="+this.name);
            console.log("年龄="+this.age);
        }
    }
    //new 对象
    let pk=new Student("碰磕",18);
    pk.sayHi();
    Student.sa();
    console.log(pk.name);

    //继承
    class Boy extends Student{
        constructor(na,age){
            super(na,age);//不写会报错
            console.log("男选手的构造方法");
        }
    }
    let boy1=new Boy("张三",11);
    console.log(boy1.area);//江西(继承成功)

    //模板字符串(用`(反引号)标识,用${}将变量括起来)
    let name1='碰磕';
    let age=16;
    let t=`
        <div>
            <h3>名字=${name1}</h3>
            <p>年龄=${age}</p>    
        </div>
    `;
    console.log(t);

    //Homework
    /*
    1、通过ES6语法创建学生类（姓名，性别，班级）和游戏类（名称，公司，发行年份），添加各自的构造方法。
    2、创建一个学生（姓名，性别，班级）数组，通过模板字符串拼接显示学生的所有信息（表格）
    3、创建一个游戏数组（名称，公司，发行年份），通过模板字符串拼接显示游戏的所有信息（无序列表）
    */
   //1
   class Students{
       constructor(xm,sex,ban){
            this.name=xm;
            this.sex=sex;
            this.ban=ban;
       }
   }
   class Game{
       constructor(mc,gs,time){
           this.mc=mc;
           this.gs=gs;
           this.time=time;
       }
   }
   //2
   let stumap=new Map();
   stumap.set("name","碰磕");
   stumap.set("sex","男");
   stumap.set("cls","c1901");
   for (const [key,val] of stumap) {
    let stuinfo=`<table border="1px"><tr><td>${val}</td></tr></table>`;
    console.log(stuinfo);
   }
   //3
   let gamemap=new Map();
   gamemap.set("mc","王者荣耀");
   gamemap.set("gs","天美工作室");
   gamemap.set("time","2004-1-1");
   for (const [key,val] of gamemap) {
       let gameinfo=`<ul><li>${val}</li></ul>`;
       console.log(gameinfo);
   }
</script>
</html>